<!--/**
* Author: ganqz
* Date: 2022-07-28 17:50
* Desc: FooterBtn 
*/
-->
<template>
  <view class="footer-btn tc">
    <!-- 双按钮-->
    <view v-if="showCommision" class="flex">
      <!-- 左按钮-->
      <view v-if="isLogin && memberLevel" class="feature flex-1 flex-col tc flex-c btn btn-border" @click="onShare">
        <view class="top">推荐好友购买</view>
        <view class="bottom">赚{{ info.commission || 0 }}元</view>
      </view>
      <view v-else class="feature btn btn-border flex-1 flex flex-m flex-c" @click="onShare">推荐好友购买赚佣金</view>
      <!-- 右按钮-->
      <view v-if="isLogin && memberLevel" class="buy flex-1 flex flex-m btn ml10" @click="handleClick">
        <view class="flex-1 left">
          <price :price="info.sellPrice" unit-size="30" price-size="46" custom-class="mr10" color="#fff"></price>
        </view>
        <view class="flex-1 right flex-col tc flex-c">
          <text class="top">自购</text>
          <view class="bottom">返{{ info.commission || 0 }}元</view>
        </view>
      </view>
      <view v-else class="buy btn flex-1 flex flex-m flex-c ml25" @click="handleClick">
        <price :price="info.sellPrice" unit-size="30" price-size="46" custom-class="mr10" color="#fff"></price>

        <text class="fs30 ml10">立即购买</text></view
      >
    </view>
    <!-- 单独按钮-->
    <view v-else class="buy btn flex-1 flex flex-m flex-c" @click="handleClick">
      <price :price="info.sellPrice" unit-size="30" price-size="46" custom-class="mr10" color="#fff"></price>

      <text class="fs40 ml10">立即购买</text>
    </view>
  </view>
</template>
<script>
  import { getIslogin } from '@/utils/auth'
  import { mapGetters } from 'vuex'
  import Price from '@/components/Price'
  export default {
    name: 'FooterBtn',
    components: { Price },
    props: {
      info: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {}
    },
    onLoad(option) {
      console.log(option)
      this.init()
    },
    onShow() {
      this.init()
    },
    computed: {
      showCommision() {
        return this.info.openDistribution === '1'
      },
      ...mapGetters(['memberLevel']),
      isLogin() {
        return getIslogin()
      }
    },
    methods: {
      handleClick() {
        this.$emit('click')
      },
      onShare() {
        if (!+this.memberLevel) {
          this.$emit('pop')
        } else {
          this.$emit('share')
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .footer-btn {
    padding: 30rpx 30rpx;
    background: #fff;
    .btn-border {
      border: 2rpx solid #fa5a0b;
      border-radius: 20rpx;
      box-sizing: border-box;
    }
    .btn {
      border-radius: 20rpx;
      font-size: 24rpx;
      text-align: center;
      height: 100rpx;
      line-height: 1.2;
      overflow: hidden;
    }
    .feature {
      color: #fa5a0b;
      font-size: 24rpx;
      .top {
        font-size: 24rpx;
      }
      .bottom {
        font-size: 30rpx;
      }
    }
    .buy {
      color: #fff;
      background: linear-gradient(-90deg, #fb580c 0%, #fd550f 99%);
      /deep/.price {
        font-size: 36rpx;
      }
      /deep/.price-40 {
        font-size: 40rpx;
      }
      .left {
        font-size: 30rpx;
      }
      .right {
        background: #ff7535;
        height: 100%;
        .top {
          font-size: 24rpx;
        }
        .bottom {
          font-size: 30rpx;
        }
      }
    }
  }
</style>
